<template>
  <div>
    <PlainCreateBtn :show-icon="false" @click="openDialog">设置默认数据行</PlainCreateBtn>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      class="medium-common-dialog-size subform-default-dialog"
      @close="closeDialog">
      <component
        v-if="cloneElement"
        :is="cloneElement.options.isCard?'el-form':'div'"
        :style="cloneElement.options.isCard?{maxHeight: maxHeight+'px'}:''"
        :class="{'subform-scroll': cloneElement.options.isCard}"
        :label-position="widgetData.config.labelPosition || 'right'"
        :label-width="widgetData.config.labelWidth + 'px'"
        size="small"
        class="main">
        <SubTableContent v-model="cloneElement.value" :is-edit="true" :form-options="widgetData" :element="cloneElement" :table-height="tableHeight" is-set-default />
      </component>
      <div class="btn">
        <el-button type="primary" size="small" @click="toSubmit()">保存</el-button>
        <el-button type="info" size="small" class="cancel-btn-style" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/Title';
import SubTableContent from '../components/SubTableContent';
import { forEachFormOptions } from '@/utils/formMakeUtils.js';

export default {
  components: { Title, SubTableContent },
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    },
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100, labelPosition: 'right',
            keyToFormula: {} // 公式字段的映射表（被引用的字段: 引用它的公式字段）
          }
        };
      }
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      tableHeight: '',
      maxHeight: '',
      cloneElement: null
    };
  },
  methods: {
    toSubmit() {
      this.$set(this.selectWidget, 'value', this.cloneElement.value);
      this.closeDialog();
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    openDialog() {
      this.handleFormOptions();
      if (!this.selectWidget.subform || this.selectWidget.subform.length === 0) {
        this.$message.error(`请设置${this.selectWidget.name}的字段`);
        return;
      }
      this.cloneElement = _.cloneDeep(this.selectWidget);
      this.cloneElement.options.hideOperation = false;
      const clientHeight = window.innerHeight;
      this.tableHeight = (clientHeight * 3) / 5;
      this.maxHeight = (clientHeight * 4) / 5;
      this.dialogFormVisible = true;
    },

    // 处理提交数据
    handleFormOptions() {
      const postFollowerData = {};
      const userFollowerData = {};
      forEachFormOptions(this.widgetData.list, (i) => {
        if (i.type === 'post') {
          this.setPostFollowerData(i, postFollowerData);
        }
        if (i.type === 'user') {
          this.setUserFollowerData(i, userFollowerData);
        }
      });
      this.widgetData.config.postFollowerData = postFollowerData;
      this.widgetData.config.userFollowerData = userFollowerData;
    },
    // 设置人员选择组件映射
    setUserFollowerData(data, userFollowerData) {
      if (data.options.userSelectValue && data.options.defaultValue > 4) {
        if (!userFollowerData[data.options.userSelectValue]) {
          userFollowerData[`${data.options.userSelectValue}`] = [];
        }
        userFollowerData[`${data.options.userSelectValue}`].push(data.key);
      }
    },
    // 设置人员选择和职位映射
    setPostFollowerData(data, postFollowerData) {
      const currPostValue = {
        key: data.key,
        linkFormKey: data.linkFormKey,
        isMultiple: data.options.isMultiple,
        isSubTable: data.isSubTable
      };
      if (data.options.follower) {
        if (postFollowerData[data.options.follower]) {
          postFollowerData[data.options.follower].push(currPostValue);
        } else {
          postFollowerData[data.options.follower] = [currPostValue];
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.subform-scroll {
  @include scrollBar();
}
</style>
<style lang="scss">
.subform-default-dialog {
  .el-dialog__body {
    padding: 16px 24px !important;
  }
}
</style>
